<template>
  <q-tab-panels v-model="tab">
    <q-tab-panel name="addCourse">
      <q-card>
        <q-card-section class="q-pt-xs">
          <div class="text-h5">课程内容</div>
          <div class="text-overline">添加课程</div>
        </q-card-section>
        <q-card-section horizontal>
          <q-card-section class="col-4">
            <q-file
              v-model.lazy="file"
              label="请输入课程"
              accept="image/*"
              filled
              bottom-slots
              counter
              :multiple="false"
            >
              <template #prepend>
                <q-icon name="cloud_upload" @click.stop.prevent />
              </template>
              <template #append>
                <q-icon
                  name="close"
                  class="cursor-pointer"
                  @click.stop.prevent="
                    file = null;
                    sended = false;
                  "
                >
                  <q-tooltip> 清空 </q-tooltip>
                </q-icon>
                <q-icon
                  v-if="!sended"
                  name="send"
                  class="cursor-pointer q-ml-md"
                  @click.stop.prevent="sendFile"
                >
                  <q-tooltip> 发送 </q-tooltip>
                </q-icon>
                <q-icon v-else name="check"> </q-icon>
              </template>
              <template #hint> 请等待封面上传完成后再提交表单 </template>
            </q-file>
            <q-img :src="filePreview"></q-img>
          </q-card-section>
          <q-separator vertical />
          <q-card-section class="col-8">
            <q-form @submit="submitCourse">
              <q-input
                v-model="course.courseName"
                lazy-rules
                :rules="[(val) => !!val || '课程标题为必选项']"
                name="courseName"
                label="课程标题"
              ></q-input>
              <q-select
                v-model.lazy="major"
                label="课程所属专业"
                lazy-rules
                :rules="[(val) => val.id != '' || '专业为必选项']"
                :options="majorlist"
                :option-label="getLabel"
                :option-value="getCourseValue"
              ></q-select>
              <q-input
                v-model="course.courseDescription"
                lazy-rules
                :rules="[(val) => !!val || '详情为必填项']"
                type="textarea"
                autogrow
                label="输入课程的详情描述"
              ></q-input>
              <q-input
                v-model="course.courseUrl"
                lazy-rules
                :rules="[(val) => !!val || '网址为必选项']"
                type="text"
                label="课程网址"
              ></q-input>
              <q-btn
                class="float-right q-mt-md q-px-md"
                :color="sended ? 'positive' : 'negative'"
                :disable="!sended"
                type="submit"
                >提交
                <q-tooltip v-if="!sended">请先上传课程封面</q-tooltip>
              </q-btn>
            </q-form>
          </q-card-section>
        </q-card-section>
      </q-card>
    </q-tab-panel>
    <q-tab-panel name="viewCourse">
      <q-toolbar class="shadow-2">
        <q-btn flat round dense icon="menu" class="q-mr-sm" />
        <q-toolbar-title shrink>课程总览</q-toolbar-title>
        <q-input v-model="searchText" dense class="q-ml-md col-8">
          <template #append>
            <q-icon name="search" />
            <q-icon
              v-if="searchText !== ''"
              name="clear"
              class="cursor-pointer"
              @click="text = ''"
            />
          </template>
        </q-input>
      </q-toolbar>
      <q-table
        v-model:pagination="coursePagination"
        :loading="loading"
        :columns="columns"
        :rows="data"
        :filter="searchText"
        row-key="courseId"
        @request="requestCoursePage"
      >
        <template #body="prop">
          <q-tr :props="prop">
            <q-td>
              <q-btn @click="deleteCourse(prop.row.courseId)"
                ><q-icon name="delete"></q-icon
              ></q-btn>
            </q-td>
            <q-td
              v-for="(rowvalue, index) in prop.row"
              :key="index"
              style="
                max-width: 500px;
                width: fit-content;
                text-overflow: ellipsis;
                overflow: hidden;
              "
            >
              {{ rowvalue }}
              <q-tooltip>{{ rowvalue }}</q-tooltip>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </q-tab-panel>
  </q-tab-panels>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { baseurl } from "src/js/global";
import { majorlist } from "src/js/majorlist";
import { get, post } from "src/js/fetch";
import { useQuasar } from "quasar";

onMounted(() => {
  getCourses(1, 10);
});
const loading = ref(false);
const data = ref([]);
const $q = useQuasar();
const course = ref({
  courseName: "",
  courseDescription: "",
  majorId: "",
  majorName: "",
  courseUrl: "",
  courseImgUrl: "aaa",
});
const coursePagination = ref({
  sortBy: null,
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 0,
});
const major = ref({
  id: "",
  name: "",
});

function requestCoursePage(props) {
  const { page, rowsPerPage, sortBy, descending } = props.pagination;
  console.log(page, data.value);
  getCourses(page, rowsPerPage);
  coursePagination.value.page = page;
  coursePagination.value.rowsPerPage = rowsPerPage;
  coursePagination.value.sortBy = sortBy;
  coursePagination.value.descending = descending;
}
function getCourses(current, size) {
  const url = new URL(baseurl + "course/listAll");
  url.searchParams.set("current", current);
  url.searchParams.set("size", size);
  loading.value = true;
  get(url).then((res) => {
    console.log(res);
    data.value = res.data;
    coursePagination.value.rowsNumber = parseInt(res.totalPage) * 10;
  });
  loading.value = false;
}
function getLabel(item) {
  return item.name;
}
function getCourseValue(item) {
  return { majorId: item.id, majorName: item.name };
}
function submitCourse() {
  course.value.majorId = major.value.id;
  course.value.majorName = major.value.name;
  const url = new URL(baseurl + "course/add");
  console.log(course.value);
  post(url, course.value).then((res) => {
    if (res.success) {
      $q.notify({
        message: res.data,
        type: "positive",
        position: "center",
      });
    } else {
      $q.notify({
        message: res.errorMsg,
        type: "negative",
        position: "center",
      });
    }
  });
}
function deleteCourse(courseid) {
  const url = new URL(baseurl + "course/delete");
  url.searchParams.set("courseId", courseid);
  post(url).then((res) => {
    if (res.success) {
      $q.notify({
        message: res.data,
        type: "positive",
        position: "center",
      });
    } else {
      $q.notify({
        message: res.errorMsg,
        type: "negative",
        position: "center",
      });
    }
  });
}

const searchText = ref("");
const columns = [
  {
    name: "action",
    label: "操作",
    align: "center",
  },
  {
    name: "majorId",
    label: "专业ID",
    align: "center",
    field: "majorId",
    sortable: true,
  },
  {
    name: "majorName",
    label: "专业名",
    align: "center",
    field: "majorName",
    sortable: true,
  },
  {
    name: "courseId",
    label: "课程ID",
    align: "left",
    field: "courseId",
    sortable: true,
  },
  {
    name: "courseName",
    label: "课程名称",
    align: "center",
    field: "courseName",
    sortable: true,
  },
  {
    name: "courseDescription",
    label: "课程简介",
    align: "center",
    field: "courseDescription",
    sortable: true,
    class: "desc",
  },

  {
    name: "courseUrl",
    label: "课程链接",
    align: "center",
    field: "courseUrl",
    sortable: true,
  },
  {
    name: "courseImgUrl",
    label: "课程封面",
    align: "center",
    field: "courseImgUrl",
    sortable: true,
  },
];

const props = defineProps({ current: { type: String, default: "addCourse" } });
const tab = computed(() => {
  return props.current;
});

const sended = ref(false);
const file = ref(null);
function sendFile() {
  course.value.courseImgUrl = file.value.name;
  sended.value = true;
}
const filePreview = computed(() => {
  return file.value ? URL.createObjectURL(file.value) : "";
});
</script>
<style scoped>
.desc {
  text-overflow: ellipsis;
  width: 100px;
}
</style>
